<template>
  <div id="app">
    <div
        class="item"
        v-for="(item, index) in list"
        :key="index"
    >
      <div class="title">{{item.title}}</div>
      <div class="author">{{item.author}}-{{item.category}}</div>
      <img :src="item.url" alt="">
      <div class="desc">{{item.desc}}</div>
    </div>
    <div class="btn" style="padding: 20px; text-align: center" >
      <button
          v-if="NextPage"
          @click="AddMore"
      >加载更多</button>
    </div>
  </div>
</template>

<script>

import axios from 'axios'
export default {
  name: 'App',
  data() {
    return{
      list:[],
      NextPage:true,
      Page: 1,
    }
  },
  created() {
    axios({
      method:'get',
      url:`https://gank.io/api/v2/data/category/Girl/type/Girl/page/1/count/20`
    }).then(res =>{
      console.log(res.data)
      this.list = res.data.data
    }).catch(e =>{
      console.log(e)
    })
  },
  methods:{
    AddMore() {
      this.Page += 1
      axios({
        method:'get',
        url:`https://gank.io/api/v2/data/category/Girl/type/Girl/page/${this.Page}/count/20`
      }).then(res =>{
        console.log(res.data)
        this.list = res.data.data
      }).catch(e =>{
        console.log(e)
      })
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*text-align: center;*/
  color: #2c3e50;
  /*margin-top: 60px;*/
}
.item{
  width: 500px;
  border: 2px solid rgba(168,77,183,0.25);
  margin: 0 auto;
  padding: 20px;
}
.item .title{
  font-size: 20px;
  margin-bottom: 10px;
}
.item img{
  width: 100%;
}

.item .desc{
  font-size: 18px;
  padding-top: 20px;
  color: rgba(93,45,193,0.39);
}

</style>
